<template>
  <!-- <h1>Home组件</h1> -->
  <!-- <button @click="handler">+home3</button>
  <button @click="handlerdel">-home3</button> -->
  <div class="container shadow p-5">
    <div class="row">
      <div class="col-3 border border-1">

        <div v-for="route in list" :key="route.path" class="my-3">
          <span class="item-icon mr-5" :class="route.meta.icon"></span>
          <a href="#" class="ml-5" @click.prevent="nav(route.path)">{{ route.meta.label }}</a>
        </div>

      </div>
      <div class="col-9 border border-1">
        <RouterView />
      </div>

    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

// 解构 router 对象 获取push 函数
const router = useRouter();
// console.log('router.getRoutes()=>', router.getRoutes(), router.options);
// 
const list = ref(router.getRoutes().filter(route => /^\/home\//.test(route.path)));

const nav = path => {

  router.push(path);
}

const handler = e => {
  // 新增一个路由单对象
  router.addRoute('Home', {
    path: '/home/nav4',
    name: 'nav4',
    meta: { label: 'nav4', icon: 'far fa-sun', id: nanoid(6) },
    component: () => import('./nav4.vue')
  });

  list.value = router.getRoutes().filter(route => /^\/home\//.test(route.path));
  console.log('router.getRoutes()=>', router.getRoutes())
  // console.log('router.options=>',router.options);
}

const handlerdel = e => {
  router.removeRoute('nav4');
  list.value = router.getRoutes().filter(route => /^\/home\//.test(route.path));
  console.log('router.getRoutes()=>', router.getRoutes())
}
</script>

<style lang="scss" scoped>
.item {
  // display: flex;
  // flex-direction: column;
  // justify-content: center;
  // align-items: center;
  // width: 10px;
  padding: 15px;

  &-icon {
    font-size: 25px;
  }
}

a {
  text-decoration: none;
  color: #000;
}

.item-icon {
  width: 30px;
  margin-left: 20px;
  margin-right: 20px;
}
</style>